<template>
  <view class="gift-purchase">
    <view class="header">
      <view><uni-status-bar></uni-status-bar></view>

      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
          <view
            style="width: 100rpx; text-align: center"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
          >
          </view>
        </view>

        <view
          style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #000;
            font-weight: 600;
          "
        >
          订单确认
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <view style="padding: 24rpx">
      <view class="header_ip">
        <!-- <text  class="header_text">请选择收货地址</text>
                <view>
                <image style="width: 12rpx;height: 20rpx;margin-left: 10rpx;" src="/static/images/arrow-right.png"></image>
                </view> -->

        <view class="item-box pad-20">
          <view class="address-box" v-if="Object.keys(address).length > 1">
            <view class="flex-spb-cn" @click="toAddress">
              <view class="user-address flex-cn">
                <text
                  class="qh-rt-single qh-rt-a-zu4414 position-icon primary"
                ></text>
                <view class="text-box_pay" >{{ address.address }}</view>
              </view>
              <text class="qh-rt-single qh-rt-a-zu4425 right-icon"></text>
            </view>
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <view class="user-info"
                >{{ address.name }} {{ handlePhone(address.phone) }}</view
              >
              <view class="flex-spb-cn" @click="toStore">
                <!-- <view class="store-name flex-cn">
                          <text class="qh-rt-single qh-rt-a-zu4313 store-icon"></text>
                          <text class="text-ellipsis">时福全球购</text>
                        </view> 
                <text class="qh-rt-single qh-rt-a-zu4425 right-icon"></text>-->
              </view>
            </view>
          </view>
          <view v-else class="address-empty flex-cn-cn" @click="toAddress"
            >+ 请选择收货地址</view
          >
        </view>
      </view>

      <view class="pay_text">
        <view class="pay_header">
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <view style="width: 500rpx">
              <scroll-view
                class="home_icon"
                scroll-x="true"
                style="white-space: nowrap"
              >
                <view
                  v-for="(list, index) in payList"
                  class="min_cion"
                  :key="index"
                >
                  <image :src="list.img_url" alt="" />
                  <view class="font_icon"
                    >￥{{ list.money }} ×{{ list.buy_num }}</view
                  >
                </view>
              </scroll-view>
            </view>

            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 26rpx;
              "
            >
              共{{ payList.length }}件
              <image
                style="width: 12rpx; height: 20rpx; margin-left: 20rpx"
                src="/static/images/arrow-right.png"
              ></image>
            </view>
          </view>

          <view
            style="
              display: flex;
              justify-content: space-between;
              height: 50rpx;
              align-items: center;
            "
          >
            <text class="font_title">商品金额</text>
            <text class="font_money">￥{{ totalMoney }}</text>
          </view>

          <view
            style="
              display: flex;
              justify-content: space-between;
              height: 64rpx;
              align-items: center;
            "
          >
            <view>
              <text class="font_title">运费</text>
              <!-- <text class="font_man">满35免配送费</text> -->
            </view>
            <view>
              <!-- <text style="color: #999; text-decoration: line-through;font-size: 22rpx;">￥{{delivery_fee }}</text> -->
              <text class="font_money">￥{{ delivery_fee }}</text>
            </view>
          </view>
        </view>

        <view
          style="
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 60rpx;
          "
        >
          <text style="font-size: 24rpx">小计:￥</text>
          <text class="font_Max"
            >{{ parseFloat(totalMoney) + parseFloat(delivery_fee) }}</text
          >
        </view>
      </view>

      <view
        style="padding: 24rpx; background-color: #fff; border-radius: 16rpx"
      >
        <view
          style="
            display: flex;
            justify-content: space-between;
            height: 50rpx;
            align-items: center;
          "
        >
          <text class="font_order" style="">订单备注</text>

          <view
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 24rpx;
              color: #999;
            "
          >
            <input type="text" v-model="remark" />
            <!-- 更多备注 <image style="width: 12rpx;height: 20rpx;margin-left: 20rpx;" src="/static/images/arrow-right.png"></image> -->
          </view>
        </view>
      </view>
    </view>

    <view class="limit_bottom">
      <view style="padding: 0 24rpx">
        <text style="font-size: 24rpx">应付:</text>
        <text style="color: red; font-size: 24rpx">￥</text>
        <text
          style="
            color: red;
            font-size: 32rpx;
            font-family: '.PingFang SC-Regular', Arial, sans-serif;
            font-weight: bold;
          "
          >{{ parseFloat(totalMoney) + parseFloat(delivery_fee) }}</text
        >
      </view>
      <view>
        <text class="bottom_title" @click="confirmPay">去支付</text>
      </view>
    </view>
  </view>
</template>

<script>
import qhImage from "../../../../components/qh-image/qh-image.vue";
export default {
  components: { qhImage },

  data() {
    return {
      payList: [],
      totalMoney: null,
      phone: "13599490899",
      address: {},
      payObj: {},
      delivery_fee: null,
      remark: null,
      address_id: null,
    };
  },
  onLoad(options) {
    let id = options.id;
    this.payList = JSON.parse(options.payList);
    this.totalMoney = options.totalMoney;
    this.payObj = JSON.parse(options.payObj);
  },
  onShow() {
    this.getaddress();
  },
  methods: {
    async getaddress() {
      const result = await this.$request(
        "/SmallProgramApi/ShiFu/getGiftCardPayInfo",
        {
          store_id: this.$store.mallStoreId,
          address_id: this.$store.address_id ? this.$store.address_id : "",
        }
      );
      this.address_id = result.data.address.id;
      this.address = result.data.address;
      this.delivery_fee = result.data.delivery_fee;
    },

    //后退
    backHome() {
      uni.navigateBack();
    },

    toAddress() {
      uni.navigateTo({
        url: "/pages/mine/MyAddress/MyAddress?type=1",
      });
    },

    //处理收货地址的手机号展示
    handlePhone(phone) {
      if (!phone) return;
      return phone.substring(0, 3) + "****" + phone.substring(7);
    },

    //去支付
    confirmPay() {
      let obj = {
        ...this.payObj,
        address_id: this.$store.address_id
          ? this.$store.address_id
          : this.address_id,
        delivery_fee: this.delivery_fee,
        remark: this.remark,
      };
      console.log(obj, "objobjobjobjobj");
      this.$request("/SmallProgramApi/ShiFu/createOrder_v2", obj).then(
        (ret) => {
          uni.showToast({
            title: ret.msg,
            icon: "none",
          });

          if (ret.status == 1) {
            // #ifdef MP-WEIXIN
            uni.requestPayment({
              timeStamp: ret.payData.timeStamp,
              nonceStr: ret.payData.nonceStr,
              //字符串随机数
              package: ret.payData.package,
              signType: ret.payData.signType,
              paySign: ret.payData.paySign,
              success: (re) => {
                if (re.errMsg == "requestPayment:ok") {
                  // 下单
                  uni.showLoading({
                    title: "查询中...",
                    mask: true,
                  });
                  this.searchOrder(ret.order_id, 0); //查询订单
                }
              },
            });
            // #endif
          }
        }
      );
    },

    searchOrder(order_no, count) {
      const that = this;
      this.$request("/SmallProgramApi/GiftCard/searchOrder", {
        order_id: order_no,
      }).then((res) => {
        if (res.status === 1) {
          uni.hideLoading();
          uni.showToast({
            title: "等待支付",
            duration: 1000,
            mask: true,
            success() {
              // uni.navigateTo({
              //   url: '/pages/mine/gift_card/gift_card?id=' + order_no
              // });
              uni.navigateTo({
                // url: '/pages/mine/gift_mycard/gift_mycard'
                url: "/pages/mer/tabbar/my_gift_mycard/my_gift_mycard",
              });
            },
          });
        } else if (res.status === 2) {
          count++;

          if (count > 10) {
            uni.hideLoading();
            uni.showModal({
              title: "提醒",
              content: res.msg,
              showCancel: false,
              confirmColor: "#ff5c6d",
            });
          } else {
            setTimeout(() => {
              that.searchOrder(order_no, count);
            }, 1000);
          }
        } else {
          uni.hideLoading();
          uni.showModal({
            title: "提醒",
            content: res.msg,
            showCancel: false,
            confirmColor: "#ff5c6d",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "./entityPay.scss";
</style>
<style scoped lang="scss">
.gift-purchase {
  height: 100vh;
  overflow-y: auto;
  width: 100%;
  background-color: #f0f2ee;
  padding-bottom: 30rpx;
}

.header_ip {
  display: flex;
  align-content: center;
  justify-content: space-between;
  // height: 40rpx;
  background-color: #fff;
  // padding: 40rpx;
  border-radius: 16rpx;
}
.header_text {
  font-size: 33rpx;
  color: #000;
  font-weight: bold;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
}

.pay_text {
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: #fff;
  margin: 24rpx 0;
}
.pay_header {
  border-bottom: 1px solid #f5f5f5;
}

.font_icon {
  font-size: 24rpx;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: bold;
}

.min_cion {
  display: inline-block;
  width: 130rpx;
  height: 120rpx;
  text-align: center;
  margin-top: 20rpx;

  image {
    width: 100rpx;
    height: 64rpx;
  }
}

.font_money {
  font-size: 24rpx;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: bold;
}

.font_Max {
  font-size: 32rpx;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: bold;
}

.font_man {
  border-radius: 6rpx;
  border: 1px solid;
  font-size: 21rpx;
  margin-left: 16rpx;
  color: #999;
}
.font_title {
  font-size: 24rpx;
}
.font_order {
  font-size: 26rpx;
  font-weight: bold;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
}

.limit_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0rpx;
  width: 750rpx;
  height: 120rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  box-shadow: 0rpx -8rpx 12rpx 2rpx rgba(22, 38, 0, 0.04);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.limit_bottom view:nth-child(2) {
  margin: 24rpx;
  width: 149rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57rpx;
  background: #FFB73F;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.bottom_title {
  // height: 44rpx;
  font-family: ".PingFang SC-Regular", Arial, sans-serif;
  font-weight: 600;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>

